<template>
  <div class="monitor-container">
    <!-- 顶部标题栏 -->
    <div class="header">
      <div class="left">
        <div class="title-section">
          <span class="title">智能大棚监控系统</span>
          <span class="time">{{ currentTime }}</span>
        </div>
      </div>
      <div class="right">
        <UserProfile />
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="main-content">
      <!-- 左侧内容区 -->
      <div class="left-section">
        <GreenhouseInfo />
        <!-- 监控和数据展示区域 -->
        <div class="monitor-data-wrapper">
          <!-- 监控视频区域 -->
          <div class="monitor-section">
            <div class="monitor-header">
              <div class="left">
                <span>实时监控</span>
                <span class="date">{{ currentDate }}</span>
                <!-- 只保留抓拍按钮 -->
                <div class="video-controls">
                  <el-button size="small" type="primary" plain @click="handleCapture">
                    <el-icon><Camera /></el-icon>
                  </el-button>
                </div>
              </div>
            </div>
            <Player ref="playerRef" />
          </div>

          <!-- 实时数据监测 -->
          <div class="monitor-data-section">
            <div class="monitor-header">
              <div class="left">
                <div class="title-wrapper">
                  <el-icon class="title-icon"><DataLine /></el-icon>
                  <span class="title">实时数据监测</span>
                </div>
                <el-tag size="small" type="success" effect="dark" class="status-tag">
                  <el-icon><CircleCheck /></el-icon>
                  <span>数据正常</span>
                </el-tag>
              </div>
              <div class="right">
                <span class="update-time">更新时间: {{ currentDate }}</span>
                <el-button 
                  size="small" 
                  type="primary" 
                  plain 
                  @click="refreshData"
                  :loading="isRefreshing"
                >
                  <el-icon><Refresh /></el-icon>
                  <span>刷新数据</span>
                </el-button>
              </div>
            </div>

            <div class="monitor-data-content">
              <div class="data-grid">
                <!-- 空气温度卡片 -->
                <div class="data-card">
                  <div class="card-header">
                    <div class="header-left">
                      <el-icon class="icon"><Sunny /></el-icon>
                      <span>空气温度</span>
                    </div>
                    <el-tooltip 
                      content="正常范围：10℃ ~ 30℃" 
                      placement="top"
                      effect="dark"
                    >
                      <el-icon class="info-icon"><InfoFilled /></el-icon>
                    </el-tooltip>
                  </div>
                  <div class="card-body">
                    <div class="value-section">
                      <span class="num">{{ sensorData.airTemp }}</span>
                      <span class="unit">℃</span>
                      <div :class="['trend', trends.airTemp > 0 ? 'up' : trends.airTemp < 0 ? 'down' : '']" v-if="trends.airTemp !== 0">
                        <el-icon><CaretTop v-if="trends.airTemp > 0"/><CaretBottom v-else/></el-icon>
                        <span>{{ Math.abs(trends.airTemp) }}%</span>
                      </div>
                    </div>
                    <div class="chart-section">
                      <div class="card-chart" ref="tempChartRef"></div>
                      <div class="time-range">最近24小时趋势</div>
                    </div>
                  </div>
                </div>

                <!-- 空气湿度 -->
                <div class="data-card air-humidity">
                  <div class="card-header">
                    <el-icon class="icon"><Cloudy /></el-icon>
                    <span>空气相对湿度</span>
                  </div>
                  <div class="card-value">
                    <span class="num">{{ sensorData.airHumidity }}</span>
                    <span class="unit">%</span>
                    <div :class="['trend', trends.airHumidity > 0 ? 'up' : trends.airHumidity < 0 ? 'down' : '']" v-if="trends.airHumidity !== 0">
                      <el-icon><CaretTop v-if="trends.airHumidity > 0"/><CaretBottom v-else/></el-icon>
                      <span>{{ Math.abs(trends.airHumidity) }}%</span>
                    </div>
                  </div>
                  <div class="card-chart" ref="humidityChartRef"></div>
                </div>

                <!-- 土壤温度 -->
                <div class="data-card soil-temp">
                  <div class="card-header">
                    <el-icon class="icon"><Monitor /></el-icon>
                    <span>土壤温度</span>
                  </div>
                  <div class="card-value">
                    <span class="num">{{ sensorData.soilTemp }}</span>
                    <span class="unit">℃</span>
                  </div>
                  <div class="card-chart" ref="soilTempChartRef"></div>
                </div>

                <!-- 土壤PH值 -->
                <div class="data-card soil-ph">
                  <div class="card-header">
                    <el-icon class="icon"><Cpu /></el-icon>
                    <span>土壤PH值</span>
                  </div>
                  <div class="card-value">
                    <span class="num" :class="{ warning: sensorData.soilPh < 5 }">{{ sensorData.soilPh }}</span>
                    <span class="unit">pH</span>
                    <el-tag size="small" type="warning" class="status-tag" v-if="sensorData.soilPh < 5">偏酸</el-tag>
                  </div>
                  <div class="card-chart" ref="phChartRef"></div>
                </div>

                <!-- 二氧化碳 -->
                <div class="data-card co2">
                  <div class="card-header">
                    <el-icon class="icon"><WindPower /></el-icon>
                    <span>二氧化碳</span>
                  </div>
                  <div class="card-value">
                    <span class="num">{{ sensorData.co2 }}</span>
                    <span class="unit">ppm</span>
                  </div>
                  <div class="card-chart" ref="co2ChartRef"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 图表分析区域 -->
        <div class="charts-section">
          <TrendAnalysis />
        </div>
      </div>

      <!-- 右侧内容区 -->
      <div class="right-section">
        <WeatherPanel />
        <DeviceStatus />
      </div>
    </div>

    <!-- 添加抓拍预览弹窗 -->
    <el-dialog
      v-model="captureDialogVisible"
      title="抓拍预览"
      width="50%"
      :before-close="handleCloseDialog"
    >
      <div class="capture-preview">
        <img :src="captureImageUrl" v-if="captureImageUrl" class="preview-image"/>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCloseDialog">关闭</el-button>
          <el-button type="primary" @click="handleDownloadImage">
            下载图片
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import Player from '../components/Player.vue'
import type { ComponentPublicInstance } from 'vue'
import {
  Camera,
  Sunny,
  Cloudy,
  Monitor,
  Cpu,
  WindPower,
  Refresh,
  DataLine,
  CircleCheck,
  InfoFilled,
  CaretTop,
  CaretBottom
} from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import { getFboxToken, getSensorData, getSensorHistory } from '../api/monitor'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import WeatherPanel from '../components/WeatherPanel.vue'
import DeviceStatus from '../components/DeviceStatus.vue'
import UserProfile from '../components/UserProfile.vue'
import GreenhouseInfo from '../components/GreenhouseInfo.vue'
import TrendAnalysis from '../components/TrendAnalysis.vue'

const router = useRouter()
const currentTime = ref('')
const currentDate = ref('')
const chartType = ref('day')

const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleTimeString()
  currentDate.value = now.toLocaleDateString()
}

onMounted(async () => {
  // 更新时间
  updateTime()
  setInterval(updateTime, 1000)

  try {
    // 获取萤石云token
    const response = await axios.post('/api/ys/token', {
      accountId: '1ca7f0ab24ba41b291346347ec30140e'
    })
    
    console.log('获取token响应:', response.data)
    
    // 根据实际的数据结构修改判断条件
    if (response.data.code === 200 && 
        response.data.data?.code === '200' && 
        response.data.data.data?.accessToken) {
      
      const token = response.data.data.data.accessToken
      localStorage.setItem('ysToken', token)
      console.log('萤石云token已保存:', token)
    } else {
      throw new Error('获取萤石云token失败')
    }
  } catch (error) {
    console.error('获取萤石云token失败:', error)
    ElMessage.error('获取萤石云token失败')
  }

  // 初始化图表
  if (tempChartRef.value) {
    const tempChart = createMiniChart(tempChartRef.value, chartData.value.airTemp, '#ffa940')
    charts.push(tempChart)
  }
  if (humidityChartRef.value) {
    const humidityChart = createMiniChart(humidityChartRef.value, chartData.value.airHumidity, '#1890ff')
    charts.push(humidityChart)
  }
  if (soilTempChartRef.value) {
    const soilTempChart = createMiniChart(soilTempChartRef.value, chartData.value.soilTemp, '#52c41a')
    charts.push(soilTempChart)
  }
  if (phChartRef.value) {
    const phChart = createMiniChart(phChartRef.value, chartData.value.soilPh, '#ff4d4f')
    charts.push(phChart)
  }
  if (co2ChartRef.value) {
    const co2Chart = createMiniChart(co2ChartRef.value, chartData.value.co2, '#ff7a45')
    charts.push(co2Chart)
  }

  // 监听窗口大小变化，重绘图表
  window.addEventListener('resize', () => {
    charts.forEach(chart => chart?.resize())
  })

  // 首次加载数据
  await refreshData()
  
  // 每3分钟自动刷新一次数据 (180000毫秒 = 3分钟)
  setInterval(() => refreshData(), 180000)
})

const handleLogout = () => {
  localStorage.removeItem('token')
  router.push('/login')
}

// 添加视频控制方法
const playerRef = ref<ComponentPublicInstance<typeof Player> | null>(null)

const captureDialogVisible = ref(false)
const captureImageUrl = ref('')

const handleCapture = async () => {
  try {
    if (!playerRef.value) {
      throw new Error('播放器未初始化')
    }
    const picUrl = await playerRef.value.capturePicture()
    if (picUrl) {
      console.log('抓拍图片URL:', picUrl)
      captureImageUrl.value = picUrl
      captureDialogVisible.value = true
    }
  } catch (error) {
    console.error('抓拍失败:', error)
    ElMessage.error('抓拍失败')
  }
}

// 关闭弹窗
const handleCloseDialog = () => {
  captureDialogVisible.value = false
  captureImageUrl.value = ''
}

// 下载图片
const handleDownloadImage = () => {
  if (captureImageUrl.value) {
    const link = document.createElement('a')
    link.href = captureImageUrl.value
    link.download = `capture_${new Date().getTime()}.jpg`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }
}

// 图表引用
const tempChartRef = ref<HTMLElement>()
const humidityChartRef = ref<HTMLElement>()
const soilTempChartRef = ref<HTMLElement>()
const phChartRef = ref<HTMLElement>()
const co2ChartRef = ref<HTMLElement>()

// 添加 charts 数组用于存储图表实例
const charts: echarts.ECharts[] = []

// 定义传感器ID
const SENSOR_IDS = {
  AIR_TEMP: '327061375295689611',
  AIR_HUMIDITY: '327061375295689612', 
  SOIL_TEMP: '327061375295689614',
  SOIL_PH: '327061375295689606',
  CO2: '327061375295689610'
}

const BOX_NO = '300023040085'

// 传感器数据
const sensorData = ref({
  airTemp: 0,
  airHumidity: 0,
  soilTemp: 0,
  soilPh: 0,
  co2: 0
})

// 添加上一次的数据记录
const prevSensorData = ref({
  airTemp: 0,
  airHumidity: 0,
  soilTemp: 0,
  soilPh: 0,
  co2: 0
})

// 图表数据
const chartData = ref({
  airTemp: [23, 23.2, 23.1, 23.3, 23.2],
  airHumidity: [71, 71.5, 71.3, 71.7, 71.5],
  soilTemp: [18, 18.2, 18.4, 18.3, 18.6],
  soilPh: [3.0, 3.1, 3.0, 3.0, 3.0],
  co2: [480, 482, 481, 480, 480]
})

// 刷新状态
const isRefreshing = ref(false)

// 计算变化百分比的函数
const calculateChange = (current: number, previous: number): number => {
  if (previous === 0) return 0
  return Number(((current - previous) / previous * 100).toFixed(1))
}

// 获取token并缓存
const getFboxTokenWithCache = async () => {
  try {
    const cachedToken = localStorage.getItem('fboxToken')
    const tokenExpireTime = localStorage.getItem('fboxTokenExpire')
    
    if (cachedToken && tokenExpireTime && Number(tokenExpireTime) > Date.now()) {
      return cachedToken
    }

    const res = await getFboxToken()
    const token = res.access_token
    const expiresIn = res.expires_in * 1000
    
    localStorage.setItem('fboxToken', token)
    localStorage.setItem('fboxTokenExpire', String(Date.now() + expiresIn))
    
    return token
  } catch (error) {
    console.error('获取token失败:', error)
    ElMessage.error('获取token失败')
    throw error
  }
}

// 修改创建迷你图表的方法
const createMiniChart = (container: HTMLElement, data: number[], color: string) => {
  const chart = echarts.init(container)
  chart.setOption({
    grid: {
      top: 2,
      right: 2,
      bottom: 2,
      left: 2,
      containLabel: false
    },
    xAxis: {
      type: 'category',
      show: false,
      boundaryGap: false
    },
    yAxis: {
      type: 'value',
      show: false,
      // 缩小数值范围,让波动更明显
      scale: true,
      min: (value: any) => {
        return value.min - (value.max - value.min) * 0.1
      },
      max: (value: any) => {
        return value.max + (value.max - value.min) * 0.1
      }
    },
    series: [{
      data: data,
      type: 'line',
      // 减小平滑度,让波动更明显
      smooth: 0.2,
      symbol: 'none',
      lineStyle: {
        color: color,
        width: 3 // 加粗线条
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { 
            offset: 0, 
            color: color // 渐变色起始颜色更深
          },
          { 
            offset: 1, 
            color: 'rgba(0,0,0,0.05)' // 渐变色结束颜色更淡
          }
        ]),
        opacity: 0.8 // 增加填充区域透明度
      }
    }]
  })
  return chart
}

// 更新图表
const updateCharts = () => {
  charts.forEach((chart, index) => {
    if (!chart) return
    
    let data: number[] = []
    switch(index) {
      case 0:
        data = chartData.value.airTemp
        break
      case 1:
        data = chartData.value.airHumidity
        break
      case 2:
        data = chartData.value.soilTemp
        break
      case 3:
        data = chartData.value.soilPh
        break
      case 4:
        data = chartData.value.co2
        break
    }
    
    chart.setOption({
      series: [{
        data: data
      }]
    })
  })
}

// 刷新数据
const refreshData = async (retryCount = 3) => {
  if (isRefreshing.value) return
  
  isRefreshing.value = true
  try {
    await getFboxTokenWithCache()
    const data = await getSensorData(BOX_NO, Object.values(SENSOR_IDS))
    
    // 更新实时数据
    data.forEach((item: any) => {
      switch (item.id) {
        case SENSOR_IDS.AIR_TEMP:
          prevSensorData.value.airTemp = sensorData.value.airTemp
          sensorData.value.airTemp = item.value
          chartData.value.airTemp.push(item.value)
          if (chartData.value.airTemp.length > 10) chartData.value.airTemp.shift()
          break
        case SENSOR_IDS.AIR_HUMIDITY:
          prevSensorData.value.airHumidity = sensorData.value.airHumidity
          sensorData.value.airHumidity = item.value
          chartData.value.airHumidity.push(item.value)
          if (chartData.value.airHumidity.length > 10) chartData.value.airHumidity.shift()
          break
        case SENSOR_IDS.SOIL_TEMP:
          prevSensorData.value.soilTemp = sensorData.value.soilTemp
          sensorData.value.soilTemp = item.value
          chartData.value.soilTemp.push(item.value)
          if (chartData.value.soilTemp.length > 10) chartData.value.soilTemp.shift()
          break
        case SENSOR_IDS.SOIL_PH:
          prevSensorData.value.soilPh = sensorData.value.soilPh
          sensorData.value.soilPh = item.value
          chartData.value.soilPh.push(item.value)
          if (chartData.value.soilPh.length > 10) chartData.value.soilPh.shift()
          break
        case SENSOR_IDS.CO2:
          prevSensorData.value.co2 = sensorData.value.co2
          sensorData.value.co2 = item.value
          chartData.value.co2.push(item.value)
          if (chartData.value.co2.length > 10) chartData.value.co2.shift()
          break
      }
    })
    
    // 更新图表
    updateCharts()
    
    // 移除成功提示，因为数据会自动刷新，不需要每次都提示
  } catch (error) {
    console.error('刷新数据失败:', error)
    ElMessage.error('数据刷新失败')
  } finally {
    isRefreshing.value = false
  }
}

// 添加计算属性来获取变化趋势
const trends = computed(() => ({
  airTemp: calculateChange(sensorData.value.airTemp, prevSensorData.value.airTemp),
  airHumidity: calculateChange(sensorData.value.airHumidity, prevSensorData.value.airHumidity),
  soilTemp: calculateChange(sensorData.value.soilTemp, prevSensorData.value.soilTemp),
  soilPh: calculateChange(sensorData.value.soilPh, prevSensorData.value.soilPh),
  co2: calculateChange(sensorData.value.co2, prevSensorData.value.co2)
}))
</script>

<style scoped lang="scss">
.monitor-container {
  min-height: 100vh;
  background: #001529;
  color: #00e4ff;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  background: rgba(0,21,41,0.6);
  border-radius: 4px;

  .left {
    display: flex;
    align-items: center;
    gap: 40px;

    .title-section {
      display: flex;
      align-items: center;
      gap: 20px;

      .title {
        font-size: 24px;
        font-weight: bold;
        color: #00e4ff;
      }

      .time {
        color: #7fdbff;
        font-size: 16px;
      }
    }

    .select-section {
      :deep(.el-select) {
        width: 200px;
        
        .el-input {
          --el-select-input-focus-border-color: #00e4ff;
          
          .el-input__wrapper {
            background: rgba(0,21,41,0.8);
            border: 1px solid rgba(0,255,255,0.3);
            
            &.is-focus {
              border-color: #00e4ff;
              box-shadow: 0 0 0 1px #00e4ff;
            }
          }
          
          input {
            color: #00e4ff;
            
            &::placeholder {
              color: rgba(127,219,255,0.5);
            }
          }
        }
      }
      
      :deep(.el-select-dropdown) {
        background: rgba(0,21,41,0.95);
        border: 1px solid rgba(0,255,255,0.1);
        
        .el-select-dropdown__item {
          color: #7fdbff;
          
          &.selected {
            color: #00e4ff;
            background: rgba(0,228,255,0.1);
          }
          
          &:hover {
            background: rgba(0,228,255,0.05);
          }
        }
      }
    }
  }

  .right {
    :deep(.el-button--text) {
      color: #00e4ff;
      font-size: 16px;
      
      &:hover {
        color: #7fdbff;
      }
    }
  }
}

.main-content {
  display: flex;
  gap: 20px;
  padding: 0 20px;
  flex: 1;
}

.left-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.right-section {
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.info-card,
.data-panel,
.chart-panel,
.weather-panel {
  background: rgba(0,21,41,0.8);
  border: 1px solid rgba(0,255,255,0.1);
  
  :deep(.el-card__header) {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(0,255,255,0.1);
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #7fdbff;
}

.info-content {
  .info-item {
    display: flex;
    margin-bottom: 12px;
    
    .label {
      color: #7fdbff;
      width: 80px;
    }
    
    .value {
      color: #fff;
    }
  }
}

.data-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;

  .data-item {
    background: rgba(0,21,41,0.6);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    border: 1px solid rgba(0,255,255,0.1);
    transition: all 0.3s;
    
    &:hover {
      transform: translateY(-2px);
      border-color: rgba(0,255,255,0.3);
      box-shadow: 0 0 10px rgba(0,255,255,0.1);
    }
    
    .label {
      color: #7fdbff;
      font-size: 14px;
      margin-bottom: 8px;
    }
    
    .value {
      font-size: 28px;
      color: #00e4ff;
      margin-bottom: 4px;
    }

    .unit {
      font-size: 12px;
      color: rgba(127,219,255,0.8);
    }
  }
}

.monitor-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  
  .monitor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(0,21,41,0.6);
    border-radius: 4px 4px 0 0;

    .left {
      display: flex;
      align-items: center;
      gap: 20px;
      color: #7fdbff;
      font-size: 16px;

      .date {
        color: rgba(127,219,255,0.8);
        font-size: 14px;
      }

      .video-controls {
        margin-left: 20px;
        
        .el-button {
          background: rgba(0,21,41,0.8);
          border-color: rgba(0,255,255,0.3);
          color: #00e4ff;
          padding: 6px 12px;
          
          &:hover {
            background: rgba(0,228,255,0.1);
            border-color: #00e4ff;
          }
          
          .el-icon {
            font-size: 16px;
          }
        }
      }
    }
  }
}

.weather-content {
  text-align: center;
  
  .current-weather {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
    
    .temp {
      font-size: 36px;
      color: #00e4ff;
    }
    
    .desc {
      color: #7fdbff;
    }
  }
  
  .weather-range {
    color: #7fdbff;
    font-size: 14px;
  }
}

.chart-container {
  height: 400px;
  padding: 20px;

  .chart {
    width: 100%;
    height: 100%;
  }
}

.monitor-data-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  backdrop-filter: blur(8px);

  .monitor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(0,21,41,0.4);
    border-radius: 8px;
    border: 1px solid rgba(0,255,255,0.1);

    .left {
      display: flex;
      align-items: center;
      gap: 16px;

      .title-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
        
        .title-icon {
          font-size: 20px;
          color: #00e4ff;
        }

        .title {
          font-size: 16px;
          font-weight: 500;
          color: #7fdbff;
        }
      }

      .status-tag {
        display: flex;
        align-items: center;
        gap: 4px;
        background: rgba(0,255,127,0.15);
        border: 1px solid rgba(0,255,127,0.3);
        
        .el-icon {
          font-size: 14px;
        }
      }
    }

    .right {
      display: flex;
      align-items: center;
      gap: 16px;

      .update-time {
        color: rgba(127,219,255,0.8);
        font-size: 14px;
      }

      .el-button {
        display: flex;
        align-items: center;
        gap: 4px;
        background: rgba(0,21,41,0.6);
        border-color: rgba(0,255,255,0.3);
        
        &:hover {
          background: rgba(0,228,255,0.1);
          border-color: #00e4ff;
        }
      }
    }
  }

  .data-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 4px;

    .data-card {
      background: rgba(0,21,41,0.4);
      border-radius: 12px;
      padding: 16px;
      border: 1px solid rgba(0,255,255,0.1);
      transition: all 0.3s;
      
      &:hover {
        border-color: rgba(0,255,255,0.3);
        box-shadow: 0 0 20px rgba(0,255,255,0.1);
        transform: translateY(-2px);
      }

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;

        .header-left {
          display: flex;
          align-items: center;
          gap: 8px;
          color: #7fdbff;

          .icon {
            font-size: 20px;
          }
        }

        .info-icon {
          color: rgba(127,219,255,0.6);
          cursor: pointer;
          
          &:hover {
            color: #00e4ff;
          }
        }
      }

      .card-body {
        .value-section {
          display: flex;
          align-items: baseline;
          gap: 8px;
          margin-bottom: 12px;

          .num {
            font-size: 32px;
            font-weight: 600;
            color: #00e4ff;
            font-family: 'DIN Alternate', sans-serif;
          }

          .unit {
            font-size: 14px;
            color: rgba(127,219,255,0.8);
          }

          .trend {
            display: flex;
            align-items: center;
            gap: 2px;
            font-size: 12px;
            padding: 2px 6px;
            border-radius: 4px;
            margin-left: 8px;

            &.up {
              color: #52c41a;
              background: rgba(82,196,26,0.1);
            }

            &.down {
              color: #ff4d4f;
              background: rgba(255,77,79,0.1);
            }
          }
        }

        .chart-section {
          .card-chart {
            height: 40px;
            margin-bottom: 4px;
          }

          .time-range {
            text-align: center;
            font-size: 12px;
            color: rgba(127,219,255,0.6);
          }
        }
      }

      // 为不同类型的卡片添加特色边框
      &.temp { border-left: 3px solid #ffa940; }
      &.humidity { border-left: 3px solid #1890ff; }
      &.soil-temp { border-left: 3px solid #52c41a; }
      &.ph { border-left: 3px solid #ff4d4f; }
      &.co2 { border-left: 3px solid #ff7a45; }
    }
  }
}

.monitor-data-wrapper {
  display: flex;
  gap: 12px;
  background: rgba(0,21,41,0.6);
  border-radius: 8px;
  padding: 12px;
}

.monitor-section {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.monitor-data-section {
  flex: 1;
  
  .monitor-data-content {
    height: 100%;
    
    .data-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      height: 100%;
      
      .data-card {
        background: rgba(0,21,41,0.4);
        border-radius: 8px;
        padding: 10px;
        border: 1px solid rgba(0,255,255,0.1);
        
        .card-value {
          .num {
            font-size: 24px;
          }
        }
        
        .card-chart {
          height: 40px;
        }
      }
    }
  }
}

.trend {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;

  &.up {
    color: #52c41a;
    background: rgba(82,196,26,0.1);
  }

  &.down {
    color: #ff4d4f;
    background: rgba(255,77,79,0.1);
  }

  .el-icon {
    font-size: 12px;
  }
}

.capture-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  
  .preview-image {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

:deep(.el-dialog) {
  background: rgba(0,21,41,0.95);
  border: 1px solid rgba(0,255,255,0.1);
  
  .el-dialog__header {
    border-bottom: 1px solid rgba(0,255,255,0.1);
    margin-right: 0;
    padding: 12px 20px;
    
    .el-dialog__title {
      color: #00e4ff;
    }
  }
  
  .el-dialog__body {
    padding: 20px;
  }
  
  .el-dialog__footer {
    border-top: 1px solid rgba(0,255,255,0.1);
    padding: 12px 20px;
  }
}
</style>
